<!-- 底部导航栏 -->
<template>
    <div class="wrap">
        <ul id="tabber">
            <li v-for="(sort,index) in sortList" :class="{active:$route.path==sort.path}" :key="index" @click="changeStyle(sort,index)">
                <span class="ico">
                    <i class="icon iconfont" :class="sort.icon"></i>
                </span>
                <span class="title">{{sort.name}}</span>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isActive: -1,
            sortList: [
                {
                    name: "مېنىڭ",
                    icon: "icon-huiyuan",
                    value: "user",
                    path: "/user"
                },
                {
                    name: "تۈرلەر",
                    icon: "icon-fenlei",
                    value: "sort",
                    path: "/sort"
                },
                {
                    name: "باشبەت",
                    icon: "icon-tubiao15",
                    value: "home",
                    path: "/home"
                },
                {
                    name: "تېلىۋېزىيە",
                    icon: "icon-TV",
                    value: "tv",
                    path: "/tv"
                },
                {
                    name: "ئىزدەش",
                    icon: "icon-sousuo",
                    value: "search",
                    path: "/search"
                }
            ]
        };
    },
    methods: {
        changeStyle(item, index) {
            this.isActive = index;
            this.$route.path != item.path && this.$router.push(item.path);
        }
    },
    computed:{
    }
};
</script>
<style lang='scss' scoped>
.wrap {
    position: fixed;
    bottom: 0;
    height: 150px;
    background-color: #fff;
    width: 100vw;
    border-top: 2px solid #cccccc;
    ul {
        height: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        color: white;
        li {
            height: 120px;
            width: 230px;
            display: flex;
            flex-direction: column;
            color: #00a2ff;
            .ico {
                margin-top: 10px;
                i {
                    font-size: 50px;
                }
            }
            .title {
                color: #292a2a;
                font-size: 25px;
            }
        }
        .active {
            animation: jump 1.5s linear 0s 1 alternate;
            box-sizing: border-box;
            box-shadow: 0 0 5px 1px #00a2ff;
            border-radius: 15px;
        }
    }
}
@keyframes jump {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0);
    }
}
</style>